<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/view/include/css-include.jsp"%>
<%@ include file="/view/include/jsp-include.jsp"%>
<%@ include file="/view/include/jquery-include.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    $().ready(function() {    
    	view(1);
        $("#onWrite").bind("click",function(){
            location="/productWrite.html";            
        });
        
        $("#onAdjust").bind("click",function(){
            location="/productAdjust.html";            
        });
        
        /* 조회버튼 */
        $("#btnSearch").bind("click",function(){       
            view(1);
        });
        
    });

    function view(page){
        $.post(
                '/getProductView.json', {                      
                paging : page,//odrNo,
                listScale : "15",
                goodsCode : $("#goodsCode").val(),
                goodsName : $("#goodsName").val(),
                custName : $("#custName").val(),
                nation : $("#nation").val(),
                custCode : $("#custCode").val()
               },
            function(data) {
                //$("#productDetail").remove();
                //reSetValidete(); //벨류데이션 초기화
                searchDataMaping(data);    //DATA맵핑 
            });
    }
    
    /* searchData 맵핑 */
    function searchDataMaping(data){
           
        var contents = "";
        var cHeader = "<tr>"
        	+"<th width='*'>Code</th>"
        	+"<th width='200px'>Product</th>"
        	+"<th width='50px'>Unit</th>"
        	+"<th width='50px'>Box</th>"
        	+"<th width='100px'>H.S Code</th>"                        
        	+"<th width='100px'>Product Code</th>"
        	+"<th width='200px'>Messrs</th>"
        	+"<th width='20px'>U</th>"
        	+"<th width='20px'>D</th>"
        	+"</tr>";
        //$("#productDetail tr").remove();
        if(data.resultList.length == 0){
        	contents = "<tr><td colspan='9' height='50' bgcolor='#FFFFFF' align='center'><B>No Data</B></td></tr>";
            $("#productDetail").html(cHeader+contents);
            
        }else{
        	var tdTmp = "";
        	$.each(data.resultList, function(index){  // List로 받아온값 (여러건)  
        		if(this.cnt == 0){
        			tdTmp = "<td align='center'><a href='javascript:onDel(\""+this.goodsCode+"\");'><img src='images/web/ic_x.gif' alt='Delete' id='onDelete'/></a></td>"
                }else{
                	tdTmp = "<td align='center'></td>"
                }
                contents += "<tr style='cursor:pointer' onclick='rowSelect(this, \""+this.goodsCode+"\")'><td align='center'>"+this.goodsCode+"</td>"
                    +"<td align='left' class='boSub'><a href='javascript:onDetail(\""+this.goodsCode+"\");'>"+this.goodsName+"</a></td>"
                    +"<td align='center'>"+this.unit+"</td>"
                    +"<td align='right' class='boSubR'>"+this.boxQty+"</td>"
                    +"<td align='center'>"+this.hsCode+"</td>"
                    +"<td align='center'>"+this.productCode+"</td>"
                    +"<td align='left' class='boSub'>"+this.custName+"</td>"
                    +"<td align='center'><a href='javascript:onUpdate(\""+this.goodsCode+"\");'><img src='images/web/ic_up.gif' alt='Update' id='onUpdate'/></a></td>"
                    +tdTmp
                    +"</tr>";
             });
        }        
        var totalPage = Math.ceil(parseInt(data.productCount)/parseInt(15));        
        $("#spanCount").empty().html("Total : "+data.productCount);
        $("#pageCount").empty().html("Page : "+$("#pageNum").val()+" / "+totalPage);                    
        $("#page").empty().html(data.pageSplit);
        $("#productDetail").html(cHeader+contents);  // 조회 값 뿌리기
        $("#productDetail tr:eq(1)").click(); 
    }
    
    function onUpdate(arg){
        location="/productUpdate.html?goodsCode="+arg;
    }

    function onDetail(arg){
        location="/productDetail.html?goodsCode="+arg;
    }

    function onDel(arg){
        $.post(
                '/delProduct.json', {  
                	goodsCode : arg
               },
            function(data) {
               if(data.result == true){
                   alert("Deleted.....!");
                   view($("#pageNum").val());    
               }else{
                   alert("ERROR!");
               }  
            });
    }

    function ajaxPageSplit(num) {
        $("#pageNum").val(num);
        view(num);
    }
    
    var goodsCodeTmp = "";
    function rowSelect(obj, goodsCode){
    	goodsCodeTmp = goodsCode;
        $("#productDetail tr").css("backgroundColor","#FFFFFF");
        obj.style.backgroundColor="#e0eeee";  
        document.ondblclick=dblclick;
    }

    function dblclick(){
        onUpdate(goodsCodeTmp);
    }
</script>
</head>
<body>
<div class="wrap">
    <div class="pagetitle">
        <h1>PRODUCT</h1>
    </div>
    <div>
        <table class="TableST">
            <tr>
                <th>Customer Code</th>
                <td>
                    <input type="text" class="inST" name="custCode" id="custCode"/>
                </td>
                <th>Customer Name</th>
                <td>
                    <input type="text" class="inST" name="custName" id="custName"/>
                </td>
            </tr>
            <tr>
                <th>Product Code</th>
                <td>
                    <input type="text" class="inST" name="goodsCode" id="goodsCode"/>
                </td>
                <th>Product Name</th>
                <td>
                    <input type="text" class="inST" name="goodsName" id="goodsName"/>
                </td>
            </tr>
            <!-- tr>
                <th>Nation</th>
                <td colspan="3">
                    <input type="text" class="inST" name="nation" id="nation"/>

                </td>
            </tr-->
        </table>
        <div class="bo_btnS">
            <ul class="btnst"><li class="a"><a href="#" id="btnSearch" >SEARCH</a></li></ul>
        </div>
        <br/><br/><br/><br/>
        <ul>
            <li class="totaltext"><span id="spanCount">Total : 0</span></li>
            <li class="pagetext"><span id="pageCount">Page : 1&frasl;1</span></li>
            <li class="bolistW">
                <table class="TableST4" id="productDetail">
                    <!-- tr>
                        <th width="100px">Code</th>
                        <th width="*">Product</th>
                        <th width="50">Unit</th>
                        <th width="50px">Box</th>
                        <th width="100px">H.S Code</th>                        
                        <th width="100px">Product Code</th>
                        <th width="150px">Shipper</th>
                        <th width="20px">U</th>
                        <th width="20px">D</th>
                    </tr>
                    <span id="productDetail">
                        <tr>
                           <td colspan="9"></td>    
                        </tr>
                    </span-->                    
                </table>
            </li>
        </ul>
    </div>
    <!--<div class="padeNum">
    <a href="#"><img src="images/web/icon_navi_01.gif" /></a>1.2.3.4.5.6.7<a href="#"><img src="images/web/icon_navi_02.gif" /></a>
    </div>
    -->
    <div class="page_wrap">
        <div class="page" id="page" >
        </div>
    </div>
    <div class="bo_btn">
        <ul class="btnst"><li class="a"><a href="#" id="onWrite" >INSERT</a></li></ul>
        <ul class="btnst"><li class="a"><a href="#" id="onAdjust" >ADJUST</a></li></ul>
    </div>
    <input type="hidden" name="pageNum" id="pageNum" value="1">
</div>
</body>
</html>